import React, { useRef, useState, useEffect } from 'react';
import { Radio, Row, Col, Card, Space, Switch } from 'antd';
import { connect, history } from 'umi';
import { qaType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import Indentation from '@/components/Indentation';
import ImagePreviewGroup from '@/components/DescriptionsCondition/ImagePreviewGroup';
import MessageModal from './components/MessageModal';
import UpdateTeacher from './components/UpdateTeacher';
import { useUpdateEffect } from 'ahooks';
const AnsweringMessageList = (props) => {
    const { list = {}, dispatch, loading } = props
    const { location = {} } = history
    const { query = {}, pathname } = location
    const { accessId } = query
    const childRef = useRef();
    const [visible, setVisible] = useState(false)
    const [subjectList, setSubjectList] = useState([])
    const [active, setActive] = useState('subject')
    const [visible1, setVisible1] = useState(false)
    const tabList = [
        {
            key: 'subject',
            tab: '学科答疑',
        },
        {
            key: 'teacherOnline',
            tab: '找老师在线',
        },
        {
            key: 'recruitmentOnline',
            tab: '招考在线',
        },
    ];
    const fetchSearchList = () => {
        dispatch({
            type: 'answering/fetchListSubject',
            callback: (e) => {
                setSubjectList(e)
            }
        })

    }
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleReload = () => {
        childRef.current.reloadData();
    };


    useEffect(() => {
        fetchSearchList()
    }, [])
    useUpdateEffect(() => {
        handleCallback()
    }, [active])
    // table 表头
    const searchItems = [
        {

            label: '客户',
            name: 'userKeyword',
        },
        {

            label: '答疑状态',
            name: 'status',
            type: 'select',
            select: {
                0: '去回复',
                1: '已回复',
                2: '待评价',
                3: '已评价',
            }
        },
        {
            label: '学科',
            name: 'subjectIds',
            type: 'select',
            type: 'multiple',
            show: active === 'subject',
            fieldNames: {
                label: 'subjectName',
                value: 'id'
            },
            select: subjectList
        },
        {

            label: '答疑老师',
            name: 'teacherId',
            type: 'teacher'
        },
        {

            label: '是否精选',
            name: 'handpickedFlag',
            type: 'select',
            select: {
                0: '否',
                1: '是'
            }
        },
        {

            label: '首次提问时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
        {

            label: '最后回答时间',
            type: 'rangePicker',
            name: 'lastAnswerStartTime',
            end: 'lastAnswerEndTime',
        },

    ];
    const getColumns = [

        {
            title: '提问人',
            dataIndex: 'askUsername',

        },
        {
            title: '手机号码',
            dataIndex: 'askUserMobile',

        },
        {
            title: '考试年份',
            dataIndex: 'askUserExamYear',

        },
        {
            title: '已答疑次数',
            dataIndex: 'usedAskAmount',

        },
        {
            title: '学科',
            dataIndex: 'subjectName',

        },
        {
            title: '创建时间',
            dataIndex: 'createTime',

        },
        {
            title: '问题描述',
            dataIndex: 'content',
            render: (e) => {
                if (e) {
                    const data = JSON.parse(e) || {}
                    const { text, image } = data
                    return <Indentation width={160} str={text}></Indentation>
                }
                return '--'
            }
        },
        {
            title: '问题描述图片',
            dataIndex: 'content',
            render: (e) => {
                if (e) {
                    const data = JSON.parse(e) || {}
                    const { images } = data
                    return <ImagePreviewGroup url={images}></ImagePreviewGroup>
                }
                return '--'
            }
        },
        {
            title: '答疑老师',
            dataIndex: 'teacherName',
        },
        {
            title: '答疑状态',
            dataIndex: 'status',
            render: (e) => {
                return {
                    '-1': '待支付',
                    0: '去回复',
                    1: '已回复',
                    2: '待评价',
                    3: '已评价',
                }[e]
            }
        },
        {
            title: '是否精选',
            dataIndex: 'handPickedFlag',
            render: (e, record) => {
                const { } = record
                return <Switch onChange={(val) => {
                    dispatch({
                        type: 'answering/fakeUserQaChangeHandpicked',
                        payload: {
                            userQaId: record.id,
                            handPickedFlag: val ? '1' : '0',
                        },
                        callback: () => {
                            handleReload()
                        }
                    })
                }} checked={e === '1'}></Switch >
            }
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    title: '切换老师',
                    type: 'edit',
                    click: () => {
                        setVisible1({ show: true, detail: record, })
                    },
                },
                {
                    auth: true,
                    title: '答疑回复',
                    visible: pathname !== '/answeringModule/answeringMessageList',
                    type: 'edit',
                    click: () => {
                        setVisible({ show: true, detail: record, editType: 'edit', title: '回复' })
                    },
                },
                {
                    auth: true,
                    title: '查看回复',
                    visible: pathname === '/answeringModule/answeringMessageList',
                    type: 'edit',
                    click: () => {
                        setVisible({ show: true, detail: record, title: '查看回复' })
                    },
                },
            ],
        },
    ];
    return <Row >
        <Col span={24}>
            <TableDataBlock
                params={{
                    searchType: pathname === '/answeringModule/answeringMessageList' ? 'all' : 'my',
                    teachingMode: active,
                }}
                cardProps={{
                    tabList: tabList,
                    activeTabKey: active,
                    onTabChange: (key) => {
                        setActive(key);
                    }
                }}
                cRef={childRef}
                loading={loading}
                searchItems={searchItems}
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                dispatchType="answering/fetchListUserQa"
                {...list}
            ></TableDataBlock>
        </Col >
        <MessageModal visible={visible} onClose={() => { setVisible(false) }}></MessageModal>

        <UpdateTeacher
            subjectList={subjectList}
            handleCallback={handleReload}
            visible={visible1}
            onClose={() => { setVisible1(false) }}
        ></UpdateTeacher>
    </Row >

}
export default connect(({ answering, loading }) => ({
    list: answering.userQaList,
    loading: loading.effects['answering/fetchListUserQa'],
}))(AnsweringMessageList);
